<script setup lang="ts" name="Home">
    


</script>

<template>





    <div class="h-[calc(100vh-88px)] flex items-center justify-center relative overflow-hidden">
      <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://ai-public.mastergo.com/ai/img_res/d157e090fdb0b5bcce62c01e0c9c841a.jpg'); background-color: rgba(255, 255, 255, 0.9); background-blend-mode: overlay;"></div>
      <div class="grid grid-cols-2 gap-12 relative z-10 max-w-7xl mx-auto px-8">
        <div class="flex flex-col justify-center">
          <h2 class="text-5xl font-bold mb-6 leading-tight">
            <span class="block text-gray-800">扬帆起航</span>
            <span class="bg-gradient-to-r from-blue-500 to-indigo-600 bg-clip-text text-transparent">追梦远方</span>
          </h2>
          <p class="text-gray-600 text-lg mb-8 leading-relaxed">
            毕业是人生的新起点，也是梦想启航的地方。站在青春的十字路口，让我们以知识为帆，以勇气为桨，驶向人生的广阔海洋。无论未来多远，请记住：你所学的每一课，经历的每一次困难，都是通往成功的基石。现在，是时候展翅高飞，用智慧和毅力书写属于你的精彩人生篇章。
          </p>
          <div class="flex gap-4">
            <button class="bg-blue-600 text-white px-8 py-3 !rounded-button whitespace-nowrap hover:bg-blue-700 transition-colors">
              开启未来
            </button>
            <button class="border-2 border-gray-300 text-gray-600 px-8 py-3 !rounded-button whitespace-nowrap hover:border-blue-600 hover:text-blue-600 transition-colors">
              探索机遇
            </button>
          </div>
        </div>
        <div class="flex items-center justify-center">
          <img src="https://ai-public.mastergo.com/ai/img_res/487051fdf8a17c001d7fbd5de62f7d52.jpg" alt="" class="w-[480px] h-[480px] object-cover rounded-2xl shadow-2xl transform hover:scale-105 transition-transform duration-500" />
        </div>
      </div>
    </div>






</template>


<style scoped lang="scss">
.center {
//   width: 300px;
  height: 200px;
  padding: 10px;
  font-size: 50px;
  margin: 20px auto;


  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;

  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;

  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

</style>
